<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- jqGrid required js and css  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/user/ui.jqgrid-bootstrap.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="/user/grid.locale-cn.js"></script>
	<script src="/user/jquery.jqGrid.js"></script>
	<style type="text/css">
		.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
		    height: 17px;
		    margin-top: 5px;
		    text-align: center;
		}
	</style>
</head>
<body>

<div id="app" class="container">
	<div class="panel panel-default">
        <div class="panel-heading text-center">
			<h2>User List  JQgrid</h2>
		</div>
		<div id="user_table_div" class="panel-body"></div>
		<div id="user_table_div2" class="panel-body"></div>
    </div>
 
</div>

<script>
$(function(){
	
	(function initUserTable(){
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
		
		$("#user_table_div").empty().html('<table id="user_table" class="table table-hover "  width="100%"></table><div id="user_pager" style="height:30px;"></div>');
		var $table = $("#user_table");
		
		var settings = {}
		
		var userColModel = [
	        { label: 'ID', name: 'id', width: 200, align:'center', key:true},
	        { label: '用户名称', name: 'username', width: 300, align:'center'},
	        { label: '密码', name: 'password',width:300, align:'center'},
	        //aaa 是虚构的
	        { label: '操作', sortable: false, name: 'aaa', width: 150 ,align:'center',
	        	formatter: function(cellValue, options, rowObject)
	        	{
	            	return '<a class="success-info" onclick="window.operate('+options.rowId+','+rowObject.id+')" >操作'+rowObject.id+'</a>';
	        	}
	        }
	    ];
		
		$table.jqGrid({
	        url: '/loadUsers',
	        mtype: "POST",
	        postData:settings,
	        datatype: "json",
	        colModel: userColModel,
	        rowNum: 10,
	        shrinkToFit: false,
	        viewrecords: true,
	        gridview: true,
	        sortable:false,
	        width:1020,
	        height:400,
	        loadui: "Disable",
	        sortname:'id',
	        sortorder:'asc',
	        recordtext : "记录 {0} ~ {1} | 总记录数 {2}",//显示记录数的格式
	        emptyrecords : "",//空记录时的提示信息
	        pgtext : "{0}/{1}",//页数显示格式
	        pager: "#user_pager",
	        rownumbers: true, //可自动在表格前面添加序号
	        rownumWidth:50,
	        caption: "<h2><b>点击按钮翻页</b></h2>",
	       
	        
	        //==================subGrid begin=====================
	        
	        subGrid : true,
	        subGridRowExpanded : function (subgrid_id, row_id) {
	        	// we pass two parameters
	            // subgrid_id is a id of the div tag created whitin a table data
	            // the id of this elemenet is a combination of the "sg_" + id of the row
	            // the row_id is the id of the row
	            // If we wan to pass additinal parameters to the url we can use
	            // a method getRowData(row_id) - which returns associative array in type name-value
	            // here we can easy construct the flowing
	            var subgrid_table_id,pager_id;
	            subgrid_table_id = subgrid_id + "_t";
	            pager_id = "p_" + subgrid_table_id;
	            $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
	            jQuery("#" + subgrid_table_id).jqGrid({
	                url : "/loadRoles?id=" + row_id,
	                datatype : "json",
	                colNames : ['RoleID', 'roleName', 'desc'],
	                colModel : [
	                    {
	                        name : "id",
	                        index : "id",
	                        width : 50,
	                        key : true,
	                        align : "center"
	                    },
	                    {
	                        name : "roleName",
	                        index : "roleName",
	                        width : 100,
	                        align : "center"
	                    },
	                    {
	                        name : "descrip",
	                        index : "descrip",
	                        width : 70,
	                        align : "center"
	                    },
	                ],
	                rowNum : 20,
	                pager : pager_id,
	                width:888,
	                sortname : 'id',
	                sortorder : "asc",
	                height : '100%'
	            });
	            //禁止导航栏
	            jQuery("#" + subgrid_table_id).jqGrid('navGrid',  "#" + pager_id,{ edit : false, add : false, del : false,search:false, refresh: false});
	        },
	        subGridRowColapsed : function (subgrid_id, row_id)
	        {
	            // this function is called before removing the data
	            var subgrid_table_id;
	            subgrid_table_id = subgrid_id+"_t";
	            jQuery("#"+subgrid_table_id).remove();
	        },
	        editurl:'/modifyUser'
	        
	        
	       //======================subGrid over================================================
	    });
	
	    $table.jqGrid('setLabel', 'rn', '序号', {'text-align':'center','vertical-align': 'center'}, {'title':'序号'});
	    for (var i = 0; i < userColModel.length; i++) {
	        var model = userColModel[i];
	        $table.jqGrid('setLabel', model.name, model.label, {'text-align' : 'center' }, {'title':model.label});
	    }
	    //后台需要加入过滤
// 	    $table.jqGrid('navGrid','#user_pager',{del:false,add:false,edit:false,search:false});
// 		$table.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
		
		$table.jqGrid('navGrid','#user_pager',{});
	})();
	
	
	//第二种方式的表格展示
	(function initUserTable(){
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
		$("#user_table_div2").empty().html('<table id="user_table2" class="table table-hover "  width="100%"></table><div id="user_pager2" style="height:30px;"></div>');
		var $table = $("#user_table2");
		var settings = {}
		var userColModel = [
	        { label: 'ID', name: 'id', width: 200, align:'center', key:true},
	        { label: '用户名称', name: 'username', width: 300, align:'center'},
	        { label: '密码', name: 'password',width:300, align:'center'},
	        //aaa 是虚构的
	        { label: '操作', sortable: false, name: 'aaa', width: 150 ,align:'center',
	        	formatter: function(cellValue, options, rowObject)
	        	{
	            	return '<a class="success-info" onclick="window.operate('+options.rowId+','+rowObject.id+')" >操作'+rowObject.id+'</a>';
	        	}
	        }
	    ];
		$table.jqGrid({
	        url: '/loadUsers',
	        mtype: "POST",
	        postData:settings,
	        datatype: "json",
	        colModel: userColModel,
	        rowNum: 5,
	        shrinkToFit: false,
	        viewrecords: true,
	        gridview: true,
	        sortable:false,
	        width:1020,
	        height:200,
	    	page: 1,
			scroll: 1,
	        loadui: "Disable",
	        sortname:'id',
	        sortorder:'asc',
	        recordtext : "记录 {0} ~ {1} | 总记录数 {2}",//显示记录数的格式
	        emptyrecords : "",//空记录时的提示信息
	        pgtext : "{0}/{1}",//页数显示格式
	        pager: "#user_pager2",
	        rownumbers: true, //可自动在表格前面添加序号
	        rownumWidth:50,
	        caption: "<h2><b>滚动鼠标加载数据</b></h2>"	
	    });
	
	    $table.jqGrid('setLabel', 'rn', '序号', {'text-align':'center','vertical-align': 'center'}, {'title':'序号'});
	    for (var i = 0; i < userColModel.length; i++) {
	        var model = userColModel[i];
	        $table.jqGrid('setLabel', model.name, model.label, {'text-align' : 'center' }, {'title':model.label});
	    }
	})();
});
</script>
</body>
</html>
